import styled from "styled-components";
import Card from "@mui/material/Card";
import CardGiftcardIcon from "@mui/icons-material/CardGiftcard";
import { connect } from "react-redux";
import { parseToRecordDayList,parseToRecordWeek } from "redux/reducers/recordList";
import iconHash from "Iconlibs/hash";
import NoData from "views/noData";
const RecordRecent = (props: any) => {
  const records = props.records;
  const recordDays = parseToRecordDayList(records);
  console.log(parseToRecordWeek(records));
  
  const RecordListContent = styled.div`
       overflow: scroll;
       height: 100%;
  `
  const RecordRecent = styled.div`
    .record-title {
      color: #666666;
      margin-bottom: 15px;
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .day {
        color: #000;
        margin-right: 6px;
        font-weight: 500;
      }
      .week {
        margin-left: 6px;
      }

      .input {
        margin: 6px;
        color: #90d781;
      }
      .output {
        color: #fe9798;
        margin-left: 6px;
      }
    }
    .record-list {
      width: 85%;
      margin: 0 auto;
      > li {
        margin-bottom: 6px;
      }
    }
  `;
  const Spacer = styled.div`
    flex-grow: 1;
  `;
  const IconWrapper=styled.div`
    padding: 8px 10px;
    background-color: #ffd64e;
    border-radius: 8px;
    margin-bottom: 3px;
     svg {
     width: 20px;
     height: 20px;
       >path{
         fill: white;
       }
     
    }
  `
  const RecordContent = styled.div`
    padding: 16px;
    display: flex;
    color: #333;
    flex-direction: row;
    align-items: center;

    .tag {
      margin-left: 10px;
      font-size: 17px;
    }
    .note{
      font-size: 16px;
      margin-left: 15px;
    }
    .spend {
      font-size: 20px;
    
      .input {
     
      }
      .output {
   
      }
    }
  `;
  return (
    <RecordListContent>
      {recordDays.length===0 && <NoData/>}
      {
      
        recordDays.map((recordDayItem) => {
        return (
          <RecordRecent>
            <div className="record-title">
              <span className="day">{recordDayItem.currentDate}</span> :{" "}
              <span className="week">{recordDayItem.currentWeek}</span>
              <Spacer></Spacer>
              <span>收</span>
              <span className="input">{recordDayItem.totalInput}</span>
              <span>支</span>
              <span className="output">{recordDayItem.totalOutput}</span>
            </div>

            <ul className="record-list">
              {recordDayItem.children.reverse().map((item) => {
                const Icon = iconHash[item.tags[0].TagIcon];
                return (
                  <li>
                    <Card>
                      <RecordContent>
                        <IconWrapper>
                          <Icon/>
                        </IconWrapper>
                       
                        <div className="tag">{item.tags[0].tagName}</div>
                        <div className="note">{ item.note}</div>
                        <Spacer />
                        <div className="spend">
                          {item.input === 0 ? (
                            <span className="output">-{item.output}</span>
                          ) : (
                            <span className="input">+{item.input}</span>
                          )}
                        </div>
                      </RecordContent>
                    </Card>
                  </li>
                );
              })}
            </ul>
          </RecordRecent>
        );
      })}
    </RecordListContent>
  );
};
const mapStateToProps = (state: any) => {
  return { records: state.record };
};
export default connect(mapStateToProps)(RecordRecent);
